
import React, { useState } from 'react';
import { Spin, Modal, message, Button, Tooltip, Space } from 'antd';
import { Scrollbars } from 'react-custom-scrollbars';
import { Document, Page, pdfjs } from 'react-pdf'
import { PlusCircleOutlined, MinusCircleOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons';
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

export interface PdfProps {
    url: string,
    icon?: any,
    text: string,
    width?: any
    disabled: boolean
}
const PdfReader: React.FC<PdfProps> = (props: PdfProps) => {
    const [visible, setVisible] = useState<boolean>(false);
    const [pageWidth, setPageWidth] = useState<number>(600);
    const [pageNumber, setPageNumber] = useState<number>(1);
    const [pageTotal, setPageTotal] = useState<number>(1);
    const switchModal = () => {
        setVisible(!visible)
    }
    const onDocumentLoadSuccess = (info: any) => {
        message.success('load success')
        setPageTotal(info._pdfInfo.numPages);
    }
    const onDocumentLoadFail = () => {
        message.error('load fail')
    }
    const zoomIn = () => {
        if (pageWidth <= 600) {
            return
        }
        setPageWidth(pageWidth * 0.8)
    }
    const zoomOut = () => {
        setPageWidth(pageWidth * 1.2)
    }
    const pagePre = () => {
        if (pageNumber <= 1) {
            return
        }
        setPageNumber(pageNumber - 1)
    }
    const pageNext = () => {
        setPageNumber(pageNumber + 1)
    }
    return (
        <>
            <Button type="primary" onClick={switchModal} icon={props.icon} disabled={props.disabled}>{props.text}</Button>
            <Modal
                title="图纸浏览"
                visible={visible}
                destroyOnClose={true}
                onCancel={switchModal}
                footer={false}
                width={props.width}
                style={{ top: 20, padding: 0 }}
            >
                <div style={{ margin: '0px auto', padding: '5px 5px 5px 360px', backgroundColor: '#444' }}>
                    <Space>
                        <Button type="text" size="small" style={{ color: '#fff' }}>{pageNumber} / {pageTotal}</Button>
                        <Tooltip title="上一页">
                            <Button type="text" size="small" icon={<LeftOutlined style={{ color: '#fff' }} />} onClick={pagePre} disabled={pageNumber <= 1} />
                        </Tooltip>
                        <Tooltip title="下一页">
                            <Button type="text" size="small" icon={<RightOutlined style={{ color: '#fff' }} />} onClick={pageNext} disabled={pageNumber >= pageTotal} />
                        </Tooltip>
                        <Tooltip title="放大">
                            <Button type="text" size="small" icon={<PlusCircleOutlined style={{ color: '#fff' }} />} onClick={zoomOut} />
                        </Tooltip>
                        <Tooltip title="缩小">
                            <Button type="text" size="small" icon={<MinusCircleOutlined style={{ color: '#fff' }} />} onClick={zoomIn} />
                        </Tooltip>
                    </Space>
                </div>
                {/* <div style={{ width: '100%', height: 600, overflow: 'auto', backgroundColor: '#444' }}> */}
                <Scrollbars autoHide style={{ height: '600px' }}>
                    <Document
                        //文件路径,
                        file={props.url}
                        //加载成功调用 
                        onLoadSuccess={onDocumentLoadSuccess}
                        //加载失败调用 
                        onLoadError={onDocumentLoadFail}
                        //加载提示 
                        loading={<Spin />}>
                        <Page pageNumber={pageNumber} width={pageWidth} loading={<Spin />} />
                    </Document>
                </Scrollbars>
                {/* </div> */}
            </Modal>
        </>
    )
}
export default PdfReader;